<template>
  <div class="animejs">
    <div class="animeSvg">
      <svg width="256" height="112" viewBox="0 0 256 112">
        <path fill="none" stroke="currentColor" stroke-width="1"
          d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z">
        </path>
        <!--  -->
      </svg>
      <div class="el"></div>
    </div>
    <div class="canvas">
      <canvas id="canvas"></canvas>
      <img id="source" style="display:none;" src="@I/avatar.jpg" alt="">
      <img id="butterfly" style="display:none;" src="@I/butterfly.png" alt="">
    </div>
  </div>
</template>
<script>
import anime from "animejs/lib/anime.js";
import { onMounted } from "vue";
export default {
  name: "animeJS",
  setup() {
    const play = () => {
      // anime
      //   .timeline({
      //     easing: "easeInOutQuad", //动画速率
      //     direction: "alternate", //返回执行
      //     duration: 400, //动画时间
      //     loop: true, //执行次数 true 为无限次
      //   })
      //   .add({ targets: ".person", rotate: [10, 20] }, 0) //身体是否倾斜
      //   .add({ targets: ".hand.left", rotate: [80, -50] }, 0) //左手晃动幅度
      //   .add({ targets: ".hand.right", rotate: [-50, 80] }, 0) //右手晃动幅度
      //   .add({ targets: ".leg .left", rotate: [30, -60] }, 0) //左脚晃动幅度
      //   .add({ targets: ".leg .right", rotate: [-60, 30] }, 0); //右脚晃动幅度
      var path = anime.path(".animejs path");
      anime({
        targets: ".animejs .el",
        translateX: path("x"),
        translateY: path("y"),
        rotate: path("angle"),
        easing: "linear",
        duration: 8000,
        loop: true,
      });
    };
    let canvas, ctx;
    const initCanvas = () => {
      canvas = document.getElementById("canvas");
      ctx = canvas.getContext("2d");
      const image = document.getElementById("source");
      const image1 = document.getElementById("butterfly");
      image.addEventListener("load", () => {
        ctx.drawImage(image, 0, 0, 300, 100);
      });
      image1.addEventListener("load", () => {
        ctx.drawImage(image1, 0, 0, 40, 20);
      });
    };
    onMounted(() => {
      play();
      initCanvas();
    });
    return {};
  },
};
</script>
<style scoped lang="scss">
.animejs {
  width: 100%;
  height: 100%;
  display: flex;
  .animeSvg {
    position: relative;
  }
  .el {
    width: 10px;
    height: 10px;
    background: red;
    position: absolute;
    top: -3px;
    left: -2px;
    border-radius: 10px;
  }
  .canvas {
    width: 600px;
    height: 600px;
    #canvas {
      width: 100%;
      height: 100%;
    }
  }
}

</style>
